<template>
    <div class="videoPreview">
        <!-- <el-image :src="src + '?x-oss-process=video/snapshot,t_0,f_jpg'" fit="cover"
            :style="`width:${realWidth};height:${realHeight};`" @click="dialogTableVisible = true"></el-image> -->
        <div class="videoView" :style="`width:${realWidth};height:${realHeight};`">
            <video :src="src" :style="`width:${realWidth};height:${realHeight};`" style="width: 100%;" @click="dialogTableVisible = true"></video>
        </div>
        
        <el-dialog :visible.sync="dialogTableVisible" destroy-on-close>
            <video :src="src" controls muted style="width: 100%;"></video>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "VideoPreview",
    props: {
        src: {
            type: String,
            default: () => ''
        },
        width: {
            type: [Number, String],
            default: ""
        },
        height: {
            type: [Number, String],
            default: ""
        }
    },
    data() {
        return {
            dialogTableVisible: false,
            coverUrl: ''
        }
    },
    computed: {
        realWidth() {
            return typeof this.width == "string" ? this.width : `${this.width}px`;
        },
        realHeight() {
            return typeof this.height == "string" ? this.height : `${this.height}px`;
        }
    },
}
</script>

<style lang="scss" scoped>
.videoView{
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    margin: 0 auto;
    box-shadow: 0 0 5px 1px #ccc;
}
.videoView video{
    width: 100%;
    object-fit: cover;
    translate:transform .3s linear;
}
.videoView:hover video {
    transform: scale(1.1);
}

.el-image {
    border-radius: 5px;
    background-color: #ebeef5;
    box-shadow: 0 0 5px 1px #ccc;

    ::v-deep .el-image__inner {
        transition: all 0.3s;
        cursor: pointer;

        &:hover {
            transform: scale(1.2);
        }
    }

    ::v-deep .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: #909399;
        font-size: 30px;
    }
}
</style>